<template>
	<view>
		<uni-section title="班级整体卫生情况" type="line">
			<uni-group style="display: flex; justify-content: space-around">
				<button class="clearBtn" :class="{'attBtnFontSlec':classGrage === 1 }" @click="selectHygiene(1)">优</button>
				<button class="clearBtn" :class="{'attBtnFontSlec':classGrage === 2 }" @click="selectHygiene(2)">良</button>
				<button class="clearBtn" :class="{'attBtnFontSlec':classGrage === 3 }" @click="selectHygiene(3)">差</button>
			</uni-group>
		</uni-section>
		
		<uni-section title="班级卫生检查项目" type="line">
			<uni-row v-for="(item,index) in classHygieneDetailsList" :key="index">
				<view style="margin: 0 5px 10px 5px;height: 30px;">
					<uni-col :span="6">
						<view style="line-height: 30px;">
							{{item.dictLabel}}
						</view>
					</uni-col>
					<uni-col :span="6">
						<button @click="selectHygieneItem(item,1)"
							class="clearBtn" :class="{'attBtnFontSlec':item.grade === 1 }">优</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="selectHygieneItem(item,2)"
							class="clearBtn" :class="{'attBtnFontSlec':item.grade === 2 }">良</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="selectHygieneItem(item,3)"
							class="clearBtn" :class="{'attBtnFontSlec':item.grade === 3 }">差</button>
					</uni-col>
				</view>
			</uni-row>
		</uni-section>
		<uni-section title="备注" type="line">
			<view style="padding: 0 5px 0 5px;">
				<uni-easyinput  type="textarea" v-model="notes" placeholder="请输入备注" />
			</view>
		</uni-section>
		<view style="padding-bottom: 40px;">
			<uni-section title="卫生照片" type="line">
						<uni-file-picker limit="9" v-model="photoList" @select="selectPhoto" @delete="delPhoto"/>
			</uni-section>
		</view>
		<view v-if="roleName === '部门经理'" class="tijiao" @click="submitHygiene">提 交</view>
	</view>
</template>

<script>
	import teachClass from "@/api/modules/teachClass.js"
	import classManage from "@/api/modules/classManage.js"
	export default {
		data() {
			return {
				roleName: '',
				differ: 0, //班级卫生项差个数
				good: 0, //班级卫生项良好个数
				great: 0, //班级卫生项优秀个数
				classHygieneId: '',
				notes: '',
				classGrage: '',
				dictClassHygieneCheckItem: [],
				classHygieneDetailsList: [],
				photoList: [],
				hygieneType: '',
				checkDate: '',
				classId: '',
				classHygieneId: '',
				userName : uni.getStorageSync("userName"),
			}
		},
		onLoad(options) {
			this.roleName = uni.getStorageSync("roleName");
			this.hygieneType = options.hygieneType;
			this.classId = options.classId;
			this.classHygieneId = options.classHygieneId;
			this.checkDate = options.checktime;
			teachClass.getDictByType("class_hygiene_classify").then(res => {
				this.dictClassHygieneCheckItem = res.data
				console.log("检查项:",this.dictClassHygieneCheckItem)
				console.log(this.hygieneType)
			
				//宿舍卫生检查项
				this.classHygieneDetailsList = res.data;
				if(this.hygieneType !== '2') {
					console.log("移除两项")
					this.dictClassHygieneCheckItem = this.dictClassHygieneCheckItem.filter(item => item.dictValue !== '3')
					this.dictClassHygieneCheckItem = this.dictClassHygieneCheckItem.filter(item => item.dictValue !== '4' )
					this.classHygieneDetailsList = this.classHygieneDetailsList.filter(item => item.dictValue !== '3')
					this.classHygieneDetailsList = this.classHygieneDetailsList.filter(item => item.dictValue !== '4' )
					
				}
				if(this.classHygieneId !== 'null') {
					// 根据id查询详细信息
					this.getHygieneDetails();
				}
			})
			
			
		},
		methods: {
			// 根据id查询卫生详情
			getHygieneDetails() {
				classManage.getClassHygieneDetailById(this.classHygieneId, this.checkDate).then(resp => {
					console.log(resp)
					//今日未检查
					if(resp.data === null) {
						return ;
					}
					this.notes = resp.data.notes
					this.classGrage = resp.data.grade;
					console.log("classGrade", this.classGrage)
					let tempClassHygieneDetailsList = resp.data.items
									
					this.dictClassHygieneCheckItem.forEach(e => {
						tempClassHygieneDetailsList.forEach(item => {
						   if (item.checkItem === parseInt(e.dictValue, 10)) {
							   e.grade = item.grade
							   e.checkItem = item.checkItem
							   e.classHygieneId = item.classHygieneId
							   e.id = item.id
							}
						})
					})
					this.classHygieneDetailsList = this.dictClassHygieneCheckItem
					
					let photos = resp.data.photos.split(",");
					//照片赋值
					this.photoList = photos.map(item => ({  
						url: item,  
						extname: '',  
						name: ''  
					})); 
				})
			},
		//整体卫生项选择
		selectHygiene(index) {
			this.classGrage = index;
			this.classHygieneDetailsList.forEach(item => {
				item.grade = index;
			});
			this.$forceUpdate();
		},
		//班级卫生项选择
		selectHygieneItem(item, index) {
			item.grade = index;

			this.differ = 0
			this.good = 0
			this.great = 0
			this.classHygieneDetailsList.forEach(item => {
				if (item.grade === 3) {
					this.differ++
				} else if (item.grade === 2) {
					this.good++
				} else if (item.grade === 1) {
					this.great++
				}
			});

			if (this.differ > 0) {
				this.classGrage = 3
			} else if (this.good > 0) {
				this.classGrage = 2
			} else {
				this.classGrage = 1
			}
		},
		selectPhoto(e) {
		   console.log('选择图片：', e)
		   e.tempFiles.forEach(tempFile => {
			   uni.uploadFile({
			     url: uni.url + 'classroom/hygiene/uploadHygienePhoto',
			     filePath: tempFile.url,
			     // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
			     name: 'file',
			     header: {
			       'Authorization': "Bearer " + uni.getStorageSync("token")
			     },
			     // 成功函数
			     success: (res) => {
					console.log('上传成功', res.data);
					var obj = JSON.parse(res.data);
					this.photoList.push({
						url: obj.data,
						extname: '',  
						uuid: tempFile.uuid 
					})
					console.log(this.photoList);
			     },
			     // 失败提示用户重新上传
			     fail: error => {
			       console.log('上传失败', error);
			     }
			    })
		   })
		 },
		 delPhoto(e) {
			 console.log("删除图片",e);
			 this.photoList = this.photoList.filter(item => item.url !== e.tempFile.url)
			 // if(e.tempFile.name !== '') {
				//  this.delPhotoIds.push(e.tempFile.name);
			 // }
			 
			 console.log(this.photoList)
		 },
		 //卫生检查提交
		 submitHygiene () {
		 	uni.showLoading({
		 		mask: true,
		 		title: '提交中'
		 	});
		 	console.log(this.optCheckTimeSpan)
		 
		 	let resultHygieneItemList = [
		 		...this.classHygieneDetailsList.map(item => {
		 		  let obj = {};
		 		  if (item.dictValue) {
		 			obj.checkItem = item.dictValue;
		 		  } else if (item.checkItem) {
		 			obj.checkItem = item.checkItem;
		 		  }
		 		  obj.grade = item.grade;
		 		  return obj;
		 		})
		 	];
		 	
			console.log("this photoList", this.photoList)
			// let photoUrlList = this.photoList.map(item => item.url)
			let photoUrlList = []
			this.photoList.forEach(item => {
				photoUrlList.push(item.url)
			})
		 	console.log("photoUrlList", photoUrlList)
		 	if(this.classGrage == null || this.classGrage === '') {
		 		uni.showToast({
		 		  title: "请至少检查一项卫生检查项目!",
		 		  icon: "none"
		 		});
		 		return;
		 	}
		 	//提交参数
		 	let submitHygieneInfo = {
		 		id : this.classHygieneId,
				classId: this.classId,
		 		checkUser　: this.userName,
				checkDate  : this.checkDate,
		 		grade :　this.classGrage,
				notes: this.notes,
				timeSlot: this.hygieneType,
		 		classHygieneItems : resultHygieneItemList,
		 		photos : photoUrlList,
		 	}
		 
		 	//提交成功后跳转回页面
		 	classManage.submitClassHygiene(submitHygieneInfo).then(res=> {
		 		uni.hideLoading();
		 		uni.navigateBack({
		 			delta: 1
		 		});
		 		//消息推送
		 		// if(this.dorGrage === 3) {
		 		// 	this.$api.dormitory.pushDorHygieneInfo(this.optDormitoryId,this.dorGrage,this.optCheckTimeSpan,this.rq);
		 		// }
		 	});
		 },
		}
	}
</script>

<style>
	
	.attBtnFontSlec {
		background-color: #007AFF;
		color: white !important;
	}
	
	.clearBtn {
		width: 160rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #0000FF;
		text-align: center;
		border: 1px solid #0000FF;
		line-height: 60rpx !important;
		height: 30px;
	}
	.tijiao {
		z-index: 9999;
		padding-bottom: 200px;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		background-color: #ff009a;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
</style>
